<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>班级管理 - 在线考试系统</title>
    <div th:replace="include/bootstrap :: bootstrap"></div>
</head>
<body>
<div th:replace="include/AdminNav :: AdminNav"></div>

<script th:inline="javascript">
    $(document).ready(function() {
        // 获取main-content元素
        var mainContent = $(".main-content");
        
        // 清空现有内容
        mainContent.empty();
        
        // 添加新内容
        var list = /*[[${list}]]*/ [];
        
        var content = `
            <div class="container-fluid">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">班级管理</h3>
                    </div>
                    <div class="panel-body">
                        <div class="mb-3">
                            <button class="btn btn-primary" onclick="add()">
                                <i class="glyphicon glyphicon-plus"></i> 添加班级
                            </button>
                        </div>
                        
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead>
                                    <tr>
                                        <th>班级编号</th>
                                        <th>班级名称</th>
                                        <th width="200">操作</th>
                                    </tr>
                                </thead>
                                <tbody>`;
        
        for (var i = 0; i < list.length; i++) {
            var pjclass = list[i];
            content += `
                <tr>
                    <td>${pjclass.classid}</td>
                    <td>${pjclass.classname}</td>
                    <td>
                        <button class="btn btn-sm btn-success" onclick="edit(${pjclass.classid})">
                            <i class="glyphicon glyphicon-edit"></i> 修改
                        </button>
                        <button class="btn btn-sm btn-danger" onclick="trash(${pjclass.classid})">
                            <i class="glyphicon glyphicon-trash"></i> 删除
                        </button>
                    </td>
                </tr>`;
        }
        
        if (list.length === 0) {
            content += `
                <tr>
                    <td colspan="3" class="text-center">暂无班级数据</td>
                </tr>`;
        }
        
        content += `
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        `;
        
        mainContent.append(content);
    });
</script>

<!-- 添加班级的模态框 -->
<div class="modal fade" id="addch" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="my">添加班级</h4>
            </div>
            <form action="/addClass" method="post" class="form-horizontal">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">班级名称：</label>
                        <div class="col-sm-9">
                            <input type="text" name="classname" class="form-control" required>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 编辑班级的模态框 -->
<div class="modal fade" id="editch" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">编辑班级</h4>
            </div>
            <form action="/updateClass" method="post" class="form-horizontal">
                <div class="modal-body">
                    <input type="hidden" name="classid" id="classid">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">班级名称：</label>
                        <div class="col-sm-9">
                            <input type="text" name="classname" id="classname" class="form-control" required>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary">保存修改</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    // 添加班级
    function add() {
        $('#addch').modal('show');
    }
    
    // 编辑班级
    function edit(classid) {
        $.ajax({
            url: '/findClassByClassid',
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json;charset=UTF-8',
            data: JSON.stringify({
                classid: classid
            }),
            success: function(data) {
                $('#classid').val(data.classid);
                $('#classname').val(data.classname);
                $('#editch').modal('show');
            },
            error: function() {
                alert('获取班级信息失败，请重试');
            }
        });
    }
    
    // 删除班级
    function trash(classid) {
        if (confirm('确定要删除这个班级吗？删除后将无法恢复，且相关学生信息也会一并删除。')) {
            window.location.href = '/deleteClass?classid=' + classid;
        }
    }
</script>
</body>
</html>